<template>
    <div class="flex_col_start m5 p10 card">
        <label class="flex_center_self">新建固件类型</label>
        <div class="flex_row_center mt5">
            <label>名称:</label>
            <el-input class="ml5" clearable v-model="ctx.name" style="width: 250px;" />
        </div>
        <div class="flex_row_center mt5">
            <label>版本:</label>
            <el-input class="ml5" clearable v-model="ctx.version" style="width: 200px;" />
        </div>
        <div class="flex_row_center mt5">
            <label>类型:</label>
            <el-select class="ml5" v-model="ctx.ty" style="width: 250px;">
                <el-option v-for="(item, index) in FIRM_TYPE_TYS" :key="index" :value="item" :label="item" />
            </el-select>
        </div>
        <div class="flex_row_center mt5">
            <label>平台:</label>
            <el-input class="ml5" clearable v-model="ctx.target" style="width: 200px;" />
        </div>
        <div class="flex_row_center mt5">
            <label>描述:</label>
            <el-input style="width: 250px;" v-model="ctx.description" class="ml5" type="textarea" />
        </div>
        <el-checkbox v-model="ctx.createMCUTragetFlag" label="同时创建bin/hex/bootloader_hex" />
        <div class="flex_row_center mt5">
            <el-button @click="onClickCreate" type="primary">创建</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { createFirmType, FILM_TYPE_BIN, FILM_TYPE_BOOTLOADER_HEX, FILM_TYPE_HEX, FIRM_TYPE_TYS } from '@/service/firm_type';
import { runAction } from '@/utils/ui';
import { parseNumber } from '@/utils/utils';
import { reactive } from 'vue';

interface Props {
    proj_id: number
}

const props = defineProps<Props>();

interface Ctx {
    name: string,
    description: string,
    version: string,
    ty: string,
    target: string,
    createMCUTragetFlag: boolean,
}

const ctx = reactive<Ctx>({
    name: '',
    description: '',
    version: '1',
    ty: FIRM_TYPE_TYS[0],
    target: '',
    createMCUTragetFlag: false,
});

const emit = defineEmits<{
    created: []
}>();

async function createWithMCUTarget() {
    await createFirmType({
        proj_id: props.proj_id,
        name: ctx.name,
        description: `${ctx.description}(OTA固件)`,
        version: 1,
        ty: FILM_TYPE_BIN,
        target: ctx.target
    });
    await createFirmType({
        proj_id: props.proj_id,
        name: ctx.name,
        description: `${ctx.description}(烧录固件固件)`,
        version: 2,
        ty: FILM_TYPE_HEX,
        target: ctx.target
    });
    await createFirmType({
        proj_id: props.proj_id,
        name: ctx.name,
        description: `${ctx.description}(Bootloader)`,
        version: 3,
        ty: FILM_TYPE_BOOTLOADER_HEX,
        target: ctx.target
    });
}

async function onClickCreate() {
    let flag = false;
    await runAction('创建', '固件类型', async () => {
        if (ctx.name.length == 0) {
            throw '请输入名称';
        }
        if (ctx.target.length == 0) {
            throw '请输入目标平台'
        }
        if (ctx.createMCUTragetFlag) {
            await createWithMCUTarget()
        } else {
            await createFirmType({
                proj_id: props.proj_id,
                name: ctx.name,
                description: ctx.description,
                version: parseNumber(ctx.version),
                ty: ctx.ty,
                target: ctx.target,
            });
        }
        flag = true;
    });
    if (!flag) {
        return;
    }
    emit('created');
}

</script>
